<div oc-lazy-load="['app/modules/icons.js']">
    <div class="container icons-usage" data-ng-controller="IconsCtrl as ctrl">

        <div class="block-header">
            <h2>Material icons
                <small>https://design.google.com/icons/</small>
            </h2>

        </div>

        <md-card class="m-b-30">
            <md-card-header>
                <md-card-header-text>
                    <span class="md-title">Google Material Icons </span>
                    <span class="md-subhead">Markup: &lt;i class=&quot;md-icon&quot;&gt;code&lt;/i&gt;</span>

                </md-card-header-text>
            </md-card-header>
            <md-card-content>

                <div class="row">

                    <div data-ng-repeat="item in ctrl.icons" bs-popover data-placement="top" data-toggle="popover"
                         data-content="&lt;i class=&quot;md-icon&quot;&gt;&#x{{item.code}};&lt;/i&gt;"
                         class="icon col-sm-4 col-xs-6"><a
                            href="javascript:void(0)">
                        <md-icon><i class="md-icon">{{item.name}}</i></md-icon>
                        <span>{{item.name}}</span></a></div>

                </div>
            </md-card-content>
        </md-card>
    </div>
</div>